<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
    
	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">SelectManyButton</h1>
		<div class="entry">
			<p>SelectManyButton is an input component to select options using buttons instead of checkboxes.</p>

			<h:form id="form">

                <p:selectManyButton id="menu" value="#{formBean.selectedOptions}">
                    <f:selectItem itemLabel="B" itemValue="Bold" />
                    <f:selectItem itemLabel="I" itemValue="Italic" />
                    <f:selectItem itemLabel="U" itemValue="Underline" />
                </p:selectManyButton>
                
                <p:separator style="margin-bottom:20px"/>

                <p:commandButton id="submit" value="Submit" oncomplete="PF('dlg').show()" update="display" />

                <p:dialog id="dialog" header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg">
                    <p:dataList id="display" value="#{formBean.selectedOptions}" var="option">
                        #{option}
                    </p:dataList>
                </p:dialog>

			</h:form>
            
            <h3>Source</h3>
			<p:tabView>
				<p:tab title="selectManyButton.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;

    &lt;p:selectManyButton value="\#{formBean.selectedOptions}"&gt;
        &lt;f:selectItem itemLabel="B" itemValue="Bold" /&gt;
        &lt;f:selectItem itemLabel="I" itemValue="Italic" /&gt;
        &lt;f:selectItem itemLabel="U" itemValue="Underline" /&gt;
    &lt;/p:selectManyButton&gt;

    &lt;p:separator style="margin-bottom:20px"/&gt;

    &lt;p:commandButton value="Submit" oncomplete="PF('dlg').show()" update="display" /&gt;

    &lt;p:dialog header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg"&gt;
        &lt;p:dataList id="display" value="\#{formBean.selectedOptions}" var="option"&gt;
            \#{option}
        &lt;/p:dataList&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
					</pre>

                    </p:tab>

                    <p:tab title="FormBean.java">
                        <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class FormBean implements Serializable {

    private List&lt;String&gt; selectedOptions;

    public List&lt;String&gt; getSelectedOptions() {
        return selectedOptions;
    }
    public void setSelectedOptions(List&lt;String&gt; selectedOptions) {
        this.selectedOptions = selectedOptions;
    }
}
                        </pre>
                    </p:tab>
			</p:tabView>
		</div>

	</ui:define>
</ui:composition>